<template>
  <!-- 配置信息 -->
  <div class="container">
    <el-form style="margin-top: 10px" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="能力名称：" required>
            <el-input
              v-model="formData.serviceName"
              clearable
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="能力编码：">{{
              formData.serviceCode || "自动生成"
            }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="能力别名：" required>
            <el-input
              v-model="formData.servicePath"
              clearable
              style="width: 240px"
              placeholder="请输入英文或数字"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属分类：" required>
            <el-cascader
              v-model="formData.cateIds"
              :options="fbOptions.classifyList"
              :show-all-levels="false"
              :props="{
                checkStrictly: true,
                value: 'cateId',
                label: 'cateName',
              }"
              style="width: 240px"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="能力描述：" required>
            <el-input
              v-model="formData.serviceDesc"
              style="width: 560px"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="能力类型：">
            <dict-selector
              v-model="formData.serviceType"
              :dictData="fbOptions.protocolTypeList"
              placeholder="请选择能力类型"
              :clearable="false"
              style="width: 240px"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 协议转换时使用配置信息带过来的请求方式, API直连使用api选择带的请求方式 -->
          <el-form-item label="请求方式：">{{
              formData.httpRequestMethod
            }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求路径：">
            {{ formData.mockUrl || "自动生成" }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.serviceType === '3'">
        <el-col :span="12">
          <el-form-item label="JMS数据源：">
            <el-select
              v-model="formData.jmsDatasourceCode"
              placeholder="请选择JMS数据源"
              style="width: 240px"
            >
              <el-option
                v-for="item in jmsDatasource"
                :key="item.jmsCode"
                :label="item.jmsName"
                :value="item.jmsCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消息类型：">
            <el-radio-group v-model="formData.jmsType">
              <el-radio label="queue">Queue</el-radio>
              <el-radio label="topic">Topic</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.serviceType === '3'">
        <el-col :span="12">
          <el-form-item
            :label="formData.jmsType === 'queue' ? 'Queue名称' : 'Topic名称'"
          >
            <el-input
              v-model="formData.jmsDestinationName"
              :placeholder="`请输入${
                formData.jmsType === 'queue' ? 'Queue名称' : 'Topic名称'
              }`"
              clearable
              style="width: 240px"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="JMS角色：">
            <el-radio-group v-model="formData.jmsRole">
              <el-radio label="C">消费者</el-radio>
              <el-radio label="P">生产者</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="限流开关：">
            <el-switch v-model="formData.limitCtrlStatus"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="限流方式：">
            <el-radio-group v-model="formData.limitCtrlType">
              <el-radio label="1">QPS</el-radio>
              <el-radio label="2">线程数</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="限流阈值：">
            <el-input
              v-model="formData.limitCtrlParamval"
              clearable
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预警响应时间：">
            <el-input
              v-model="formData.alarmSecs"
              placeholder="请输入预警响应时间"
              :min="0"
              type="number"
              style="width: 240px"
            >
              <template slot="append">秒</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="16">
              <el-form-item label="超时时间：">
                <el-input
                  v-model="formData.timeoutSecs"
                  placeholder="请输入超时时间"
                  :min="0"
                  type="number"
                  style="width: 240px"
                >
                  <template slot="append">秒</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="tips">(0表示采用平台默认控制)</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// import {mapState} from "vuex";
import {getJmsDatasource} from "@slc/api/slc/api";

export default {
  name: "pzxx",
  data() {
    return {
      jmsDatasource: [],
    };
  },
  props: {
    formData: {
      type: Object,
      required: false,
      default: () => {
      }
    },
    fbOptions: {
      type: Object,
      required: false,
      default: () => {
      }
    },
    computed: {
    },
    activated() {
      if (this.formData.serviceType === "3") {
        this.handleJmsData();
      }
    },
    watch: {
      "formData.serviceType"(val) {
        if (val === "3") {
          this.handleJmsData();
        }
      },
    },
    methods: {
      async handleJmsData() {
        const res = await getJmsDatasource();
        if (res.code === "200") {
          this.jmsDatasource = res.data || [];
        }
      },
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding-left: 20px;

  .tips {
    color: #999;
    padding: 10px 0 0 10px;
  }
}
</style>
